<template>
    <div class="hello">
        <el-form :inline="true">
            <el-form-item>
                <el-button type="primary" @click="importExcelHandle()">导入</el-button>
                <el-button type="primary" @click="ExportExcelHandle()">导出</el-button>
                <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
                <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
            </el-form-item>
        </el-form>

        <template>
            <el-table
                    :data="dataList"
                    border
                    v-loading="dataListLoading"
                    @selection-change="selectionChangeHandle"
                    style="width: 100%;">
                <el-table-column
                        type="selection"
                        header-align="center"
                        align="center"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="id"
                        header-align="center"
                        align="center"
                        label="id">
                </el-table-column>
                <el-table-column
                        prop="name"
                        header-align="center"
                        align="center"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="age"
                        header-align="center"
                        align="center"
                        label="年龄">
                </el-table-column>
                <el-table-column
                        prop="address"
                        header-align="center"
                        align="center"
                        label="地址">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        header-align="center"
                        align="center"
                        width="150"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                        <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 弹出导入窗口 -->
        <import-excel v-if="importExcelVisible" ref="importExcel" @refreshDataList="getDataList"></import-excel>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
</template>

<script>
    import ImportExcel from './import'
    import AddOrUpdate from './add-or-update'

    export default {
        name: 'index',
        props: {
            msg: String
        },
        data() {
            return {
                dataList: [],
                dataListSelections: '',
                dataListLoading: false,
                importExcelVisible: false,
                addOrUpdateVisible: false
            }
        },
        components: {
            ImportExcel,AddOrUpdate
        },
        activated() {
            this.getDataList()
        },
        methods: {
            getDataList() {
                axios.get('/user/list').then(data => {
                    this.dataList = data.data.data
                })
            },
            // 新增或者修改
            addOrUpdateHandle (id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            // 导入工作弹窗
            importExcelHandle() {
                this.importExcelVisible = true;
                this.$nextTick(() => {
                    this.$refs.importExcel.init()
                })
            },
            // 删除
            deleteHandle: function (id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/user/delete', {data: ids}).then(data => {
                        if (data.data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                }).catch(e => e)
            },
            // 导出
            ExportExcelHandle() {
                window.location.href = '/user/exportExcelHandle'
            }
        }
    }

</script>

<style scoped>

</style>
